<!DOCTYPE html>
<html>
<head>
    <title id="page-title">发布新帖 - FinData</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #0a0a0a;
            color: #e0e0e0;
            background-image: linear-gradient(to bottom, #0a0a0a, #121212);
        }
        
        /* 成功提示框样式 */
        .success-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
            border-left: 5px solid #4CAF50;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(76, 175, 80, 0.3);
            z-index: 1000;
            max-width: 400px;
            width: 90%;
            text-align: center;
            animation: slideInDown 0.5s ease, glow 2s infinite alternate;
        }
        
        .success-icon {
            font-size: 60px;
            color: #4CAF50;
            margin-bottom: 20px;
            animation: bounceIn 0.8s ease;
        }
        
        .success-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #e0e0e0;
        }
        
        .success-message p {
            color: #aaa;
            margin-bottom: 25px;
            line-height: 1.5;
        }
        
        .success-btn {
            padding: 12px 25px;
            background: linear-gradient(45deg, #4CAF50, #81C784);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
        }
        
        .success-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(76, 175, 80, 0.5);
        }
        
        .success-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 999;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes slideInDown {
            from {
                transform: translate(-50%, -100%);
                opacity: 0;
            }
            to {
                transform: translate(-50%, -50%);
                opacity: 1;
            }
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            60% {
                transform: scale(1.2);
                opacity: 1;
            }
            100% {
                transform: scale(1);
            }
        }
        
        @keyframes glow {
            0% {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(76, 175, 80, 0.3);
            }
            100% {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(76, 175, 80, 0.6);
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 30px;
            background-color: rgba(18, 18, 18, 0.95);
            border-bottom: 1px solid #333;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
        }
        .logo-container {
            display: flex;
            align-items: center;
        }
        .logo {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.7));
            animation: pulse 2s infinite alternate;
        }
        .logo-text {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(90deg, #8a2be2, #a855f7, #c084fc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
            animation: shine 3s linear infinite;
            margin-right: auto;
            padding-left: 15px;
        }
        .nav-container {
            display: flex;
            gap: 20px;
        }
        .nav-item {
            position: relative;
            padding: 10px 20px;
            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #e0e0e0;
            text-decoration: none;
            overflow: hidden;
            z-index: 1;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .nav-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #8a2be2, #00bfff);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .nav-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(138, 43, 226, 0.3);
            color: white;
        }
        .nav-item:hover::before {
            opacity: 1;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: #4CAF50;
            transition: all 0.3s ease;
        }
        .nav-item:hover::after {
            width: 70%;
            left: 15%;
        }
        .nav-item.active {
            background: linear-gradient(45deg, #8a2be2, #00bfff);
            color: white;
            box-shadow: 0 4px 10px rgba(138, 43, 226, 0.4);
        }
        .nav-item.active::after {
            width: 70%;
            left: 15%;
            background: #fff;
        }
        
        /* 发帖页面样式 */
        .container {
            max-width: 900px;
            margin: 30px auto;
            padding: 20px;
            animation: fadeIn 0.8s ease;
        }
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .page-title {
            font-size: 32px;
            font-weight: bold;
            color: #e0e0e0;
            background: linear-gradient(90deg, #e0e0e0, #a0a0a0);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            margin-bottom: 5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        .page-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #8a2be2, #00bfff);
            border-radius: 3px;
        }
        .back-btn {
            padding: 12px 24px;
            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
            color: #e0e0e0;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            font-weight: 500;
        }
        .back-btn i {
            margin-right: 10px;
            transition: transform 0.3s ease;
            font-size: 16px;
        }
        .back-btn:hover {
            background: linear-gradient(145deg, #252525, #333333);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
            color: #8a2be2;
        }
        .back-btn:hover i {
            transform: translateX(-5px);
            color: #8a2be2;
        }
        .post-form {
            background: linear-gradient(145deg, #121212, #1a1a1a);
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.6s ease-out;
            position: relative;
            overflow: hidden;
            border-left: 4px solid #8a2be2;
        }
        .post-form::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0.5;
        }
        .form-group {
            margin-bottom: 30px;
            position: relative;
        }
        .form-label {
            display: block;
            margin-bottom: 12px;
            font-weight: bold;
            color: #e0e0e0;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            font-size: 18px;
            letter-spacing: 0.5px;
        }
        .form-input, .form-textarea, .post-title, .post-content {
            width: 100%;
            padding: 16px;
            border: 2px solid rgba(138, 43, 226, 0.2);
            border-radius: 12px;
            background-color: rgba(26, 26, 26, 0.8);
            color: #e0e0e0;
            font-size: 16px;
            box-sizing: border-box;
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
            resize: none; /* 禁止拖拽调整大小 */
            font-family: 'Arial', sans-serif;
        }
        .form-input:focus, .form-textarea:focus, .post-title:focus, .post-content:focus {
            outline: none;
            border-color: #8a2be2;
            box-shadow: 0 0 15px rgba(138, 43, 226, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
            animation: focusGlow 2s infinite;
        }
        .form-input:focus + .form-label, .form-textarea:focus + .form-label {
            color: #8a2be2;
            transform: translateY(-3px);
        }
        .form-textarea, .post-content {
            min-height: 300px;
            resize: vertical;
            font-family: inherit;
            line-height: 1.6;
        }
        .form-submit {
            padding: 14px 30px;
            background: linear-gradient(45deg, #8a2be2, #a855f7);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            font-weight: bold;
            float: right;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
            z-index: 1;
        }
        .form-submit::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
            z-index: -1;
        }
        .form-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(138, 43, 226, 0.5);
        }
        .form-submit:hover::before {
            left: 100%;
        }
        .form-cancel {
            padding: 14px 30px;
            background: linear-gradient(145deg, #333, #444);
            color: #e0e0e0;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            margin-right: 15px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        .form-cancel:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
            background: linear-gradient(145deg, #444, #555);
        }
        .form-tip {
            font-size: 14px;
            color: #888;
            margin-top: 8px;
            position: relative;
            padding-left: 20px;
            display: inline-block;
            transition: all 0.3s ease;
        }
        .form-tip::before {
            content: '\f05a';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 0;
            color: #8a2be2;
        }
        .form-tip:hover {
            color: #a0a0a0;
            transform: translateX(3px);
        }
        .form-error {
            color: #ff6b6b;
            font-size: 14px;
            margin-top: 5px;
            display: none;
            animation: fadeIn 0.3s ease;
            padding-left: 20px;
            position: relative;
        }
        .form-error::before {
            content: '\f071';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 0;
            color: #ff6b6b;
        }
        
        /* 动画 */
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.1);
                opacity: 1;
                filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.9));
            }
        }
        @keyframes shine {
            to {
                background-position: 200% center;
            }
        }
        
        /* 新增动效 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes focusGlow {
            0% { box-shadow: 0 0 5px rgba(138, 43, 226, 0.3); }
            50% { box-shadow: 0 0 15px rgba(138, 43, 226, 0.6); }
            100% { box-shadow: 0 0 5px rgba(138, 43, 226, 0.3); }
        }
        
        .post-content {
            width: 100%;
            height: 300px;
            padding: 16px;
            background-color: rgba(26, 26, 26, 0.8);
            border: 2px solid rgba(138, 43, 226, 0.2);
            border-radius: 12px;
            color: #e0e0e0;
            font-size: 16px;
            margin-bottom: 20px;
            resize: none; /* 禁止拖拽调整大小 */
            transition: all 0.3s ease;
            line-height: 1.6;
        }
        .post-content:focus {
            outline: none;
            border-color: #8a2be2;
            box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
        }
        
        /* 添加标签输入区域样式 */
        .tags-container {
            margin-bottom: 30px;
        }
        .tags-label {
            display: block;
            margin-bottom: 12px;
            color: #e0e0e0;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
        .tags-input-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 14px;
            background-color: rgba(26, 26, 26, 0.8);
            border: 2px solid rgba(138, 43, 226, 0.2);
            border-radius: 12px;
            min-height: 60px;
            transition: all 0.3s ease;
            align-items: center;
        }
        .tags-input-container:focus-within {
            border-color: #8a2be2;
            box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
        }
        .tag {
            display: flex;
            align-items: center;
            padding: 8px 14px;
            background: rgba(138, 43, 226, 0.15);
            border: 1px solid rgba(138, 43, 226, 0.3);
            border-radius: 20px;
            color: #a855f7;
            margin-right: 8px;
            margin-bottom: 5px;
            transition: all 0.3s ease;
            animation: fadeIn 0.3s ease;
        }
        .tag:hover {
            background: rgba(138, 43, 226, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(138, 43, 226, 0.2);
        }
        .tag-text {
            margin-right: 8px;
            font-weight: 500;
        }
        .tag-remove {
            cursor: pointer;
            color: #a855f7;
            font-weight: bold;
            font-size: 16px;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .tag-remove:hover {
            background-color: rgba(138, 43, 226, 0.3);
            transform: rotate(90deg);
        }
        .tag-input {
            flex: 1;
            min-width: 120px;
            background: transparent;
            border: none;
            color: #e0e0e0;
            font-size: 16px;
            padding: 8px;
            outline: none;
        }
        .tags-hint {
            margin-top: 8px;
            font-size: 14px;
            color: #888;
            font-style: italic;
        }
        
        /* 表单按钮样式 */
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 20px;
            margin-top: 40px;
        }
        .cancel-btn {
            padding: 14px 30px;
            background: linear-gradient(145deg, #333, #444);
            color: #e0e0e0;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            font-size: 16px;
        }
        .cancel-btn:hover {
            background: linear-gradient(145deg, #444, #555);
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
        .submit-btn {
            padding: 14px 30px;
            background: linear-gradient(45deg, #8a2be2, #a855f7);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            font-size: 16px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
            z-index: 1;
        }
        .submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
            z-index: -1;
        }
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(138, 43, 226, 0.5);
        }
        .submit-btn:hover::before {
            left: 100%;
        }
        .submit-btn:disabled {
            background: linear-gradient(45deg, #666, #888);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* 清除多余的表单样式 */
        .form-tip, .form-error {
            display: none;
        }
        
        /* 图片上传区域样式 */
        .image-upload-container {
            margin-bottom: 30px;
        }
        .image-upload-label {
            display: block;
            margin-bottom: 12px;
            color: #e0e0e0;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
        .image-upload-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
            background-color: rgba(26, 26, 26, 0.6);
            border: 2px dashed rgba(138, 43, 226, 0.4);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .image-upload-area:hover {
            border-color: #8a2be2;
            background-color: rgba(138, 43, 226, 0.08);
            transform: translateY(-2px);
        }
        .image-upload-icon {
            font-size: 48px;
            color: #8a2be2;
            margin-bottom: 15px;
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        .image-upload-area:hover .image-upload-icon {
            transform: translateY(-5px);
            opacity: 1;
            color: #a855f7;
        }
        .image-upload-text {
            color: #aaa;
            text-align: center;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        .image-upload-area:hover .image-upload-text {
            color: #e0e0e0;
        }
        .image-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        .image-preview-item {
            position: relative;
            width: 120px;
            height: 120px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            animation: fadeIn 0.5s ease;
        }
        .image-preview-item:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
        }
        .image-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s ease;
        }
        .image-remove-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            opacity: 0;
        }
        .image-preview-item:hover .image-remove-btn {
            opacity: 1;
        }
        .image-remove-btn:hover {
            background-color: rgba(255, 0, 0, 0.8);
            transform: rotate(90deg);
        }
        .image-upload-hint {
            margin-top: 10px;
            font-size: 14px;
            color: #888;
            font-style: italic;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            .post-form {
                padding: 25px;
            }
            .form-actions {
                flex-direction: column;
            }
            .submit-btn, .cancel-btn {
                width: 100%;
                margin-bottom: 10px;
            }
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            .back-btn {
                align-self: flex-start;
            }
        }

        /* 添加美观的消息提示样式 */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 300px;
        }
        
        .toast {
            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
            color: #e0e0e0;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            margin-bottom: 10px;
            transform: translateX(120%);
            transition: transform 0.3s ease;
            position: relative;
            overflow: hidden;
            min-width: 250px;
            max-width: 300px;
            opacity: 0;
        }
        
        .toast.show {
            transform: translateX(0);
            opacity: 1;
        }
        
        .toast.info {
            border-left: 4px solid #2196F3;
        }
        
        .toast.success {
            border-left: 4px solid #4CAF50;
        }
        
        .toast.warning {
            border-left: 4px solid #FFC107;
        }
        
        .toast.error {
            border-left: 4px solid #F44336;
        }
        
        .toast-content {
            margin-bottom: 5px;
            word-wrap: break-word;
        }
        
        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background-color: rgba(255, 255, 255, 0.3);
            width: 100%;
        }
        
        .toast.info .toast-progress {
            background-color: #2196F3;
        }
        
        .toast.success .toast-progress {
            background-color: #4CAF50;
            }
        
        .toast.warning .toast-progress {
            background-color: #FFC107;
            }
        
        .toast.error .toast-progress {
            background-color: #F44336;
        }

        /* 免责声明和版权信息样式 */
        .disclaimer-container {
            background-color: rgba(18, 18, 18, 0.8);
            border-radius: 8px;
            padding: 15px;
            margin: 30px auto;
            max-width: 900px;
            border-top: 1px solid #333;
        }
        
        .disclaimer-text {
            font-size: 12px;
            color: #888;
            text-align: center;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .copyright {
            font-size: 12px;
            color: #666;
            text-align: center;
            margin-top: 10px;
        }

        /* 登录提示模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            background-color: #1e1e1e;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(138, 43, 226, 0.4);
            padding: 30px;
            width: 400px;
            max-width: 90%;
            text-align: center;
            position: relative;
            animation: modalAppear 0.3s ease-out;
        }
        
        @keyframes modalAppear {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: #888;
            transition: color 0.3s;
        }
        
        .close-btn:hover {
            color: #8a2be2;
        }
        
        .modal-icon {
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            background: linear-gradient(90deg, #8a2be2, #00bfff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .modal-message {
            color: #e0e0e0;
            margin-bottom: 25px;
            font-size: 1.1rem;
        }
        
        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .modal-btn {
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .cancel-btn {
            background-color: #333;
            color: #e0e0e0;
        }
        
        .cancel-btn:hover {
            background-color: #444;
        }
        
        .login-btn {
            background: linear-gradient(90deg, #8a2be2, #00bfff);
            color: white;
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script>
        let isLoggedIn = false;
        let userId = null;
        let username = null;
        let tags = [];
        let uploadedImages = [];
        let isEditMode = false;
        let editPostId = null;
        let originalImages = [];
        
        // 添加全局错误处理器
        window.onerror = function(message, source, lineno, colno, error) {
            console.error('全局错误捕获:', message);
            console.error('错误来源:', source);
            console.error('行号:', lineno);
            console.error('列号:', colno);
            console.error('错误对象:', error);
            alert(`页面发生错误: ${message} (行 ${lineno})`);
            return false;
        };
    </script>
</head>
<body>
    <!-- 在body开始处添加toast容器 -->
    <div class="toast-container" id="toastContainer"></div>
    
    <div class="header">
        <div class="logo-container">
            <svg class="logo" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 0 L40 20 L20 40 L0 20 Z" fill="#8a2be2"/>
                <path d="M10 10 L30 10 L30 30 L10 30 Z" fill="#00bfff"/>
                <path d="M15 15 L25 15 L25 25 L15 25 Z" fill="#4CAF50"/>
            </svg>
            <div class="logo-text">FinData</div>
        </div>
        
        <div class="nav-container">
            <a href="/forum" class="nav-item">
                <i class="fas fa-arrow-left"></i> 返回论坛
            </a>
        </div>
    </div>

    <div class="container">
        <h1 id="form-title" class="form-title">发布新帖</h1>
        
        <div class="post-form">
            <form id="createPostForm">
                <div class="form-group">
                    <label for="post-title" class="form-label">标题</label>
                    <input type="text" id="post-title" class="post-title" placeholder="请输入帖子标题" maxlength="100">
                </div>
                
                <div class="form-group">
                    <label for="post-content" class="form-label">内容</label>
                    <textarea id="post-content" class="post-content" placeholder="请输入帖子内容"></textarea>
                </div>
                
                <div class="form-group image-upload-container">
                    <label class="image-upload-label">添加图片</label>
                    <div class="image-upload-area" id="image-upload-area">
                        <i class="fas fa-cloud-upload-alt image-upload-icon"></i>
                        <div class="image-upload-text">点击或拖拽图片到此处上传</div>
                        <input type="file" id="image-upload" accept="image/*" multiple style="display: none;">
                    </div>
                    <div class="image-preview-container" id="image-preview-container"></div>
                    <div class="image-upload-hint">最多可上传5张图片，每张不超过5MB，支持JPG、PNG、GIF格式</div>
                </div>
                
                <div class="form-group tags-container">
                    <label class="tags-label">标签</label>
                    <div class="tags-input-container" id="tags-container">
                        <input type="text" class="tag-input" id="tag-input" placeholder="输入标签后按回车添加">
                    </div>
                    <div class="tags-hint">最多可添加5个标签，每个标签不超过20个字符</div>
                </div>
                
                <div class="form-actions">
                    <button class="submit-btn" id="submit-btn">发布</button>

                </div>
            </form>
        </div>
    </div>
    
    <!-- 成功提示框 -->
    <div class="success-overlay" id="success-overlay" style="display: none;"></div>
    <div class="success-message" id="success-message" style="display: none;">
        <div class="success-icon">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="success-title">发布成功</div>
        <p id="success-text">您的帖子已成功发布！</p>
        <button class="success-btn" id="success-btn">查看帖子</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，开始初始化...');
            
            // 调试信息 - 检查DOM元素是否存在
            const submitBtn = document.getElementById('submit-btn');
            if (submitBtn) {
                console.log('找到提交按钮元素:', submitBtn);
            } else {
                console.error('未找到提交按钮元素!');
            }
            
            const titleInput = document.getElementById('post-title');
            if (titleInput) {
                console.log('找到标题输入框元素');
            } else {
                console.error('未找到标题输入框元素!');
            }
            
            const contentInput = document.getElementById('post-content');
            if (contentInput) {
                console.log('找到内容输入框元素');
            } else {
                console.error('未找到内容输入框元素!');
            }
            
            checkLoginStatus();
            
            // 检查是否为编辑模式
            const urlParams = new URLSearchParams(window.location.search);
            const postIdParam = urlParams.get('postId');
            
            if (postIdParam) {
                isEditMode = true;
                editPostId = postIdParam;
                
                // 更新页面标题和按钮文本
                document.getElementById('page-title').textContent = '编辑帖子 - FinData';
                document.getElementById('form-title').textContent = '编辑帖子';
                document.getElementById('submit-btn').textContent = '保存修改';
                
                // 加载帖子内容
                loadPostForEditing(editPostId);
            }
            
            // 绑定提交按钮点击事件 - 只使用一种方式绑定
            if (submitBtn) {
                console.log('正在绑定提交按钮点击事件...');
                
                // 只使用addEventListener方式绑定
                submitBtn.addEventListener('click', function(e) {
                    console.log('提交按钮被点击');
                    submitPost(e);
                });
                
                console.log('提交按钮事件绑定完成');
            }
            
            // 绑定标签输入事件
            const tagInput = document.getElementById('tag-input');
            tagInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ',') {
                    e.preventDefault();
                    addTag(this.value.trim());
                    this.value = '';
                }
            });
            
            // 点击标签容器时聚焦输入框
            document.getElementById('tags-container').addEventListener('click', function() {
                document.getElementById('tag-input').focus();
            });
            
            // 绑定图片上传区域点击事件
            document.getElementById('image-upload-area').addEventListener('click', function() {
                document.getElementById('image-upload').click();
            });
            
            // 绑定图片上传事件
            document.getElementById('image-upload').addEventListener('change', handleImageUpload);
            
            // 绑定拖拽上传事件
            const uploadArea = document.getElementById('image-upload-area');
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.borderColor = '#8a2be2';
                this.style.backgroundColor = 'rgba(138, 43, 226, 0.1)';
            });
            
            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.style.borderColor = '#444';
                this.style.backgroundColor = '#1a1a1a';
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.borderColor = '#444';
                this.style.backgroundColor = '#1a1a1a';
                
                if (e.dataTransfer.files.length > 0) {
                    handleFiles(e.dataTransfer.files);
                }
            });
            
            // 阻止表单默认提交行为
            const form = document.getElementById('createPostForm');
            if (form) {
                form.addEventListener('submit', function(e) {
                    console.log('阻止表单默认提交');
                    e.preventDefault();
                    return false;
                });
            }
            
            console.log('页面初始化完成');
        });
        
        // 处理图片上传
        function handleImageUpload(e) {
            if (e.target.files.length > 0) {
                handleFiles(e.target.files);
            }
        }
        
        // 处理文件
        function handleFiles(files) {
            // 限制上传数量
            if (uploadedImages.length + files.length > 5) {
                showToast('最多只能上传5张图片', 'warning');
                return;
            }
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                // 验证文件类型
                if (!file.type.match('image.*')) {
                    showToast('请上传图片文件', 'warning');
                    continue;
                }
                
                // 验证文件大小
                if (file.size > 5 * 1024 * 1024) {
                    showToast('图片大小不能超过5MB', 'warning');
                    continue;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imageData = e.target.result;
                    
                    // 添加到预览区域
                    addImagePreview(imageData, file.name);
                    
                    // 存储图片数据
                    uploadedImages.push({
                        name: file.name,
                        data: imageData,
                        type: file.type
                    });
                };
                reader.readAsDataURL(file);
            }
        }
        
        // 添加图片预览
        function addImagePreview(imageData, fileName) {
            const previewContainer = document.getElementById('image-preview-container');
            
            const previewItem = document.createElement('div');
            previewItem.className = 'image-preview-item';
            
            const previewImage = document.createElement('img');
            previewImage.className = 'image-preview';
            previewImage.src = imageData;
            previewImage.alt = fileName;
            
            const removeButton = document.createElement('div');
            removeButton.className = 'image-remove-btn';
            removeButton.innerHTML = '<i class="fas fa-times"></i>';
            removeButton.onclick = function(e) {
                e.stopPropagation();
                removeImage(imageData);
                previewContainer.removeChild(previewItem);
            };
            
            previewItem.appendChild(previewImage);
            previewItem.appendChild(removeButton);
            previewContainer.appendChild(previewItem);
        }
        
        // 移除图片
        function removeImage(imageData) {
            const index = uploadedImages.findIndex(img => img.data === imageData);
            if (index !== -1) {
                uploadedImages.splice(index, 1);
            }
        }
        
        // 显示成功提示框
        function showSuccessMessage(message, redirectUrl) {
            // 设置消息内容
            document.getElementById('success-text').textContent = message;
            
            // 显示遮罩和提示框
            document.getElementById('success-overlay').style.display = 'block';
            document.getElementById('success-message').style.display = 'block';
            
            // 绑定按钮点击事件
            document.getElementById('success-btn').onclick = function() {
                window.location.href = redirectUrl;
            };
            
            // 3秒后自动跳转
            setTimeout(function() {
                window.location.href = redirectUrl;
            }, 3000);
            
            // 点击遮罩层也可以跳转
            document.getElementById('success-overlay').onclick = function() {
                window.location.href = redirectUrl;
            };
        }
        
        // 检查用户登录状态
        function checkLoginStatus() {
            console.log('开始检查用户登录状态...');
            fetch('/api/user-info')
                .then(response => {
                    console.log('用户信息API响应状态:', response.status);
                    if (response.status === 200) {
                        isLoggedIn = true;
                        return response.json();
                    } else {
                        isLoggedIn = false;
                        console.log('未登录，将重定向到登录页面');
                        // 未登录时跳转到登录页面
                        window.location.href = '/login?redirect=/forum/create';
                        throw new Error('未登录');
                    }
                })
                .then(data => {
                    userId = data.UserId;
                    username = data.username;
                    console.log(`登录成功，用户ID: ${userId}, 用户名: ${username}`);
                })
                .catch(error => {
                    console.log('未登录或获取用户信息失败:', error);
                });
        }
        
        // 添加标签
        function addTag(tagText) {
            if (!tagText) return;
            
            // 标签去重
            if (tags.includes(tagText)) return;
            
            // 限制标签数量
            if (tags.length >= 5) {
                showToast('最多只能添加5个标签', 'warning');
                return;
            }
            
            // 限制标签长度
            if (tagText.length > 20) {
                tagText = tagText.substring(0, 20);
            }
            
            // 添加到标签数组
            tags.push(tagText);
            
            // 创建标签元素
            const tagElement = document.createElement('div');
            tagElement.className = 'tag';
            
            const tagTextElement = document.createElement('span');
            tagTextElement.className = 'tag-text';
            tagTextElement.textContent = tagText;
            
            const removeButton = document.createElement('span');
            removeButton.className = 'tag-remove';
            removeButton.textContent = '×';
            removeButton.onclick = function(e) {
                e.stopPropagation();
                removeTag(tagText, tagElement);
            };
            
            tagElement.appendChild(tagTextElement);
            tagElement.appendChild(removeButton);
            
            // 插入到DOM中
            const tagsContainer = document.getElementById('tags-container');
            tagsContainer.insertBefore(tagElement, document.getElementById('tag-input'));
        }
        
        // 移除标签
        function removeTag(tagText, tagElement) {
            // 从数组中移除
            const index = tags.indexOf(tagText);
            if (index !== -1) {
                tags.splice(index, 1);
            }
            
            // 从DOM中移除
            tagElement.remove();
        }
        
        // 检查用户是否被禁言
        async function checkMuteStatus() {
            try {
                console.log('开始检查用户禁言状态...');
                const response = await fetch('/api/check-mute-status');
                console.log('禁言状态检查API响应:', response.status);
                
                if (response.status === 403) {
                    // 用户已被禁言
                    const data = await response.json();
                    console.log('用户被禁言，原因:', data);
                    // 设置禁言信息
                    document.getElementById('muteMessage').textContent = data.detail || '您的账户已被禁言，无法发帖。';
                    
                    if (data.reason) {
                        document.getElementById('muteReason').textContent = data.reason;
                    }
                    
                    // 显示禁言模态框
                    document.getElementById('muteModal').style.display = 'flex';
                    return true;
                } else if (response.status === 401) {
                    // 用户未登录
                    console.log('用户未登录，显示登录模态框');
                    showLoginModal();
                    return true;
                } else if (response.ok) {
                    // 用户未被禁言
                    console.log('用户未被禁言，可以发帖');
                    return false;
                } else {
                    console.error('检查禁言状态失败:', response.status);
                    showToast(`检查禁言状态失败: ${response.status}`, 'error');
                    return false;
                }
            } catch (error) {
                console.error('检查禁言状态出错:', error);
                showToast(`检查禁言状态出错: ${error.message}`, 'error');
                return false;
            }
        }
        
        // 关闭禁言提示模态框
        function closeMuteModal() {
            document.getElementById('muteModal').style.display = 'none';
        }
        
        // 用于防止重复提交的标志
        let isSubmitting = false;
        
        // 提交帖子
        async function submitPost(e) {
            // 阻止表单默认提交行为
            if (e) {
                e.preventDefault();
                e.stopPropagation();
                console.log('阻止了表单默认提交行为');
            }
            
            // 防止重复提交
            if (isSubmitting) {
                console.log("表单正在提交中，忽略重复请求");
                return;
            }
            
            isSubmitting = true;
            console.log("开始提交帖子...");
            console.log("当前登录状态:", isLoggedIn ? "已登录" : "未登录");
            
            // 检查是否在编辑状态
            const isEditing = !!editPostId;
            console.log('提交表单，编辑状态:', isEditing);
            
            // 检查用户是否被禁言
            try {
            const isMuted = await checkMuteStatus();
                console.log("禁言状态检查结果:", isMuted ? "已被禁言" : "未被禁言");
            if (isMuted) {
                return;
                }
            } catch (error) {
                console.error("检查禁言状态出错:", error);
                showToast("检查禁言状态时发生错误", "error");
            }
            
            if (!isLoggedIn) {
                console.log("用户未登录，将重定向到登录页面");
                showToast('请先登录后再发布帖子', 'warning');
                window.location.href = '/login?redirect=/forum/create';
                return;
            }
            
            const title = document.getElementById('post-title').value.trim();
            const content = document.getElementById('post-content').value.trim();
            
            console.log("标题:", title);
            console.log("内容长度:", content.length);
            console.log("标签数量:", tags.length);
            console.log("图片数量:", uploadedImages.length);
            
            if (!title) {
                console.log("标题为空，显示提示");
                showToast('标题不能为空', 'warning');
                return;
            }
            
            if (!content) {
                console.log("内容为空，显示提示");
                showToast('内容不能为空', 'warning');
                return;
            }
            
            // 显示加载状态
            const submitBtn = document.getElementById('submit-btn');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = isEditMode ? '保存中...' : '发布中...';
            submitBtn.disabled = true;
            console.log("按钮状态已更新为禁用状态");
            
            // 显示单个提交中的提示
            showToast(isEditMode ? "正在保存修改..." : "正在发布帖子...", "info");
            
            if (isEditMode) {
                // 编辑模式：使用表单提交
                console.log('使用表单提交更新帖子');
                
                try {
                    // 创建一个FormData对象
                    const formData = new FormData();
                    formData.append('title', title);
                    formData.append('content', content);
                    formData.append('tags', JSON.stringify(tags));
                    
                    console.log("准备发送更新请求...");
                    // 使用fetch API提交
                    const response = await fetch(`/forum/update/${editPostId}`, {
                        method: 'POST',
                        body: formData
                    });
                    
                    console.log("更新请求响应状态:", response.status);
                    
                    if (response.ok) {
                        const data = await response.json();
                        console.log("更新成功，响应数据:", data);
                        showSuccessMessage("帖子更新成功！", `/forum/post/${editPostId}`);
                    } else {
                        const errorData = await response.text();
                        console.error("更新帖子失败:", errorData);
                        showToast(`更新帖子失败: ${response.status} ${errorData}`, 'error');
                        submitBtn.textContent = originalText;
                        submitBtn.disabled = false;
                    }
                } catch (error) {
                    console.error("更新帖子出错:", error);
                    showToast(`更新帖子出错: ${error.message}`, 'error');
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
                
                return;
            }
            
            // 创建模式：使用API
            try {
            const postData = {
                title: title,
                content: content,
                tags: tags,
                images: uploadedImages
            };
            
                console.log('发送POST请求到/api/forum/posts-with-tags，数据:', JSON.stringify(postData));
            
                const response = await fetch('/api/forum/posts-with-tags', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(postData)
                });
                
                console.log('响应状态:', response.status);
                console.log('响应头:', response.headers);
                
                const responseText = await response.text();
                console.log('响应体:', responseText);
                    
                    if (!response.ok) {
                    let errorMsg = `发布帖子失败: ${response.status}`;
                        
                        try {
                        if (responseText) {
                            const errorJson = JSON.parse(responseText);
                                if (errorJson.error) {
                                    errorMsg += ` - ${errorJson.error}`;
                                } else if (errorJson.message) {
                                    errorMsg += ` - ${errorJson.message}`;
                                }
                            }
                        } catch (e) {
                        if (responseText && responseText.length < 100) {
                            errorMsg += ` - ${responseText}`;
                            }
                        }
                        
                        throw new Error(errorMsg);
                    }
                    
                let data;
                    try {
                    data = JSON.parse(responseText);
                    console.log("解析后的响应数据:", data);
                    } catch (e) {
                    console.warn('响应不是有效的JSON:', responseText);
                    data = { success: true, rawResponse: responseText };
                    }
                
                console.log('提交帖子成功:', data);
                
                // 获取帖子ID
                let postId = data.id || data.postId || data.post_id || data;
                
                console.log('最终帖子ID:', postId);
                
                if (!postId) {
                    throw new Error('无法获取帖子ID');
                }
                
                // 显示美化的成功提示
                showSuccessMessage('帖子发布成功！', `/forum/post/${postId}`);
                // 重置提交状态
                isSubmitting = false;
            } catch (error) {
                console.error('发布帖子失败:', error);
                showToast(error.message || '发布帖子失败，请稍后再试', 'error');
                
                // 恢复按钮状态
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
                // 重置提交状态
                isSubmitting = false;
            }
        }

        // 添加显示美观消息的函数
        function showToast(message, type = 'info', duration = 3000) {
            if (!message || message.trim() === '') {
                console.error('尝试显示空消息的Toast');
                return; // 不显示空消息
            }
            
            console.log(`显示提示: ${message} (类型: ${type})`);
            
            // 检查是否已存在相同内容的toast，避免重复显示
            const existingToasts = document.querySelectorAll('.toast');
            for (let i = 0; i < existingToasts.length; i++) {
                const existingContent = existingToasts[i].querySelector('.toast-content').textContent;
                if (existingContent === message) {
                    console.log('已存在相同内容的toast，不重复显示');
                    return;
                }
            }
            
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.innerHTML = `
                <div class="toast-content">${message}</div>
                <div class="toast-progress"></div>
            `;
            
            const toastContainer = document.getElementById('toastContainer');
            if (!toastContainer) {
                console.error('找不到toast容器');
                return;
            }
            
            // 限制最大显示数量
            if (toastContainer.children.length >= 3) {
                toastContainer.removeChild(toastContainer.children[0]);
            }
            
            toastContainer.appendChild(toast);
            
            // 添加进度条动画
            const progress = toast.querySelector('.toast-progress');
            progress.style.width = '100%';
            progress.style.transition = `width ${duration}ms linear`;
            
            // 显示toast
            setTimeout(() => {
                toast.classList.add('show');
                progress.style.width = '0%';
            }, 10);
            
            // 自动关闭
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => {
                    if (toast.parentNode) {
                    toastContainer.removeChild(toast);
                    }
                }, 300);
            }, duration);
        }

        // 加载帖子内容进行编辑
        function loadPostForEditing(postId) {
            // 显示加载状态
            document.getElementById('post-title').disabled = true;
            document.getElementById('post-content').disabled = true;
            document.getElementById('submit-btn').disabled = true;
            
            // 显示加载提示
            showToast('正在加载帖子内容...', 'info');
            
            console.log('开始加载帖子:', postId);
            
            // 从API获取帖子详情
            fetch(`/api/forum/posts/${postId}`)
                .then(response => {
                    console.log('加载帖子响应状态:', response.status);
                    if (!response.ok) {
                        throw new Error(`加载帖子失败: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('获取到帖子数据:', data);
                    
                    // 确保我们有正确的帖子ID
                    editPostId = data.id || postId;
                    console.log('确认帖子ID:', editPostId);
                    
                    // 清空现有标签和图片
                    tags = [];
                    uploadedImages = [];
                    document.getElementById('tags-container').innerHTML = '<input type="text" id="tag-input" placeholder="添加标签...">';
                    document.getElementById('image-preview-container').innerHTML = '';
                    
                    // 填充表单
                    document.getElementById('post-title').value = data.title || '';
                    document.getElementById('post-content').value = data.content || '';
                    
                    // 加载标签
                    if (data.tags && Array.isArray(data.tags)) {
                        console.log('加载标签:', data.tags);
                        data.tags.forEach(tag => {
                            if (typeof tag === 'string' && tag.trim()) {
                                addTag(tag.trim());
                            }
                        });
                    }
                    
                    // 加载图片
                    if (data.images && Array.isArray(data.images)) {
                        console.log('加载图片:', data.images);
                        originalImages = [...data.images];
                        
                        data.images.forEach(image => {
                            if (!image) return;
                            
                            let imagePath = '';
                            
                            if (typeof image === 'string') {
                                imagePath = image;
                            } else {
                                imagePath = image.image_path || image.imagePath || '';
                            }
                            
                            console.log('处理图片路径:', imagePath);
                            
                            if (!imagePath.startsWith('http://') && !imagePath.startsWith('https://')) {
                                // 如果是相对路径，需要处理
                                if (imagePath.startsWith('/uploads/')) {
                                    // 将/uploads/转换为/static/uploads/
                                    imagePath = '/static' + imagePath;
                                    console.log('修正后的图片路径:', imagePath);
                                } else if (!imagePath.startsWith('/static/')) {
                                    // 如果既不是以/static/开头，也不是以/uploads/开头，则添加/static/前缀
                                    imagePath = '/static' + (imagePath.startsWith('/') ? '' : '/') + imagePath;
                                    console.log('修正后的图片路径:', imagePath);
                                }
                            }
                            
                            console.log('最终图片路径:', imagePath);
                            
                            // 添加到预览区域
                            addImagePreview(imagePath, 'existing-image');
                            
                            // 添加到已上传图片数组
                            uploadedImages.push({
                                name: 'existing-image',
                                data: imagePath,
                                type: 'image/jpeg',
                                isExisting: true,
                                originalPath: typeof image === 'string' ? image : (image.image_path || image.imagePath || '')
                            });
                        });
                    }
                    
                    // 恢复表单状态
                    document.getElementById('post-title').disabled = false;
                    document.getElementById('post-content').disabled = false;
                    document.getElementById('submit-btn').disabled = false;
                    
                    // 重新绑定标签输入框事件
                    const tagInput = document.getElementById('tag-input');
                    if (tagInput) {
                        tagInput.addEventListener('keydown', function(e) {
                            if (e.key === 'Enter' || e.key === ',') {
                                e.preventDefault();
                                addTag(this.value.trim());
                                this.value = '';
                            }
                        });
                        
                        // 点击标签容器时聚焦输入框
                        document.getElementById('tags-container').addEventListener('click', function() {
                            document.getElementById('tag-input').focus();
                        });
                    }
                    
                    showToast('帖子加载成功', 'success');
                })
                .catch(error => {
                    console.error('加载帖子失败:', error);
                    showToast(`加载帖子失败: ${error.message}`, 'error');
                    
                    // 恢复表单状态
                    document.getElementById('post-title').disabled = false;
                    document.getElementById('post-content').disabled = false;
                    document.getElementById('submit-btn').disabled = false;
                });
        }

        // 显示登录提示模态框
        function showLoginModal(message) {
            document.getElementById('modalMessage').textContent = message || '请先登录后再进行操作';
            document.getElementById('loginModal').style.display = 'flex';
        }
        
        // 关闭登录提示模态框
        function closeModal() {
            document.getElementById('loginModal').style.display = 'none';
        }
        
        // 跳转到登录页面
        function goToLogin() {
            // 获取当前模态框消息，判断是否为回测相关
            const modalMessage = document.getElementById('modalMessage').textContent;
            if (modalMessage.includes('回测')) {
                window.location.href = '/login?redirect=/backtest';
            } else {
                window.location.href = '/login?redirect=/forum/create';
            }
        }
        
        // 检查登录状态并跳转到回测页面或显示登录提示
        function checkLoginForBacktest() {
            if (isLoggedIn) {
                // 已登录，跳转到回测页面
                window.location.href = '/backtest';
            } else {
                // 未登录，显示登录提示模态框
                showLoginModal('请先登录以使用回测功能');
            }
        }
    </script>
    
    <!-- 登录提示模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal()">&times;</span>
            <div class="modal-icon">
                <svg viewBox="0 0 24 24" width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#8a2be2" stroke-width="2"/>
                    <path d="M12 16V12M12 8H12.01" stroke="#8a2be2" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </div>
            <h3 class="modal-title">需要登录</h3>
            <p class="modal-message" id="modalMessage">请先登录以使用回测功能</p>
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" onclick="closeModal()">取消</button>
                <button class="modal-btn login-btn" onclick="goToLogin()">立即登录</button>
            </div>
        </div>
    </div>
    
    <!-- 禁言提示模态框 -->
    <div id="muteModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeMuteModal()">&times;</span>
            <div class="modal-icon">
                <svg viewBox="0 0 24 24" width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" stroke="#dc3545" stroke-width="2"/>
                    <path d="M15 9L9 15" stroke="#dc3545" stroke-width="2" stroke-linecap="round"/>
                    <path d="M9 9L15 15" stroke="#dc3545" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </div>
            <h3 class="modal-title" style="background: linear-gradient(90deg, #dc3545, #c82333); -webkit-background-clip: text; background-clip: text;">账户已被禁言</h3>
            <p class="modal-message" id="muteMessage">您的账户已被禁言，无法发帖。</p>
            <div style="background: rgba(220, 53, 69, 0.1); padding: 15px; border-radius: 8px; width: 100%; margin-bottom: 15px; text-align: left;">
                <div style="margin-bottom: 10px;">
                    <span style="font-weight: 600; color: #aaa;">禁言原因:</span>
                    <p id="muteReason" style="margin: 5px 0 0 0; color: #e0e0e0;"></p>
                </div>
            </div>
            <p style="color: #aaa; font-size: 0.9rem; text-align: center; margin: 15px 0;">
                如有疑问，请联系管理员获取帮助。
            </p>
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" style="background: linear-gradient(90deg, #dc3545, #c82333);" onclick="closeMuteModal()">我知道了</button>
            </div>
        </div>
    </div>
    
    <!-- 免责声明和版权信息 -->
    <div class="disclaimer-container">
        <div class="disclaimer-text">
            <strong>免责声明：</strong>本论坛内容由用户发布，不代表FinData平台立场。用户应对自己发表的内容负责，遵守相关法律法规。
            发布内容前请慎重考虑，任何发布的言论、图片一经发布将无法删除，平台有权根据相关规定对内容进行管理。
            请勿发布违法、虚假、误导性金融信息，不得利用本平台从事非法活动。
        </div>
        <div class="copyright">
            © 2023-2024 FinData. All Rights Reserved. 保留所有权利。
        </div>
    </div>
</body>
</html>
